<template>
	<div class="edit-papers-container" @touchstart="onScroll">
		<div class="container" v-show="state === 1">
			<nav-bar title="选择题库"></nav-bar>
			<!-- <div class="content">
                <div class="title">
                    <p class="f18">选择题库 （可多选）</p>
                    <p class="f12">
                        已选择
                        <span style="color: #56BACA;">{{form.questionBankIds.length}}</span> 项
                    </p>
                </div>
                <van-checkbox-group v-model="form.questionBankIds" ref="checkboxGroup">
                    <van-checkbox
                        v-for="(item,index) in questionBank"
                        :key="index"
                        shape="square"
                        :name="item.questionBankId"
                    >{{item.name}}</van-checkbox>
                </van-checkbox-group>
            </div>-->
			<van-tree-select
				:items="questionBank"
				:active-id.sync="form.questionBankIds"
				:main-active-index.sync="activeIndex"
				@click-item="changeBank"
			/>
			<div class="btn-wrap">
				<div class="btn" @click="next">下一步</div>
			</div>
		</div>

		<div class="container" v-show="state === 2">
			<div class="content">
				<div class="ques-item" v-for="(item, index) in form.questionSequences" :key="index">
					<van-form>
						<van-field
							readonly
							clickable
							name="picker"
							:value="item.questionType.name"
							label="题型"
							placeholder="点击选择题型"
							@click="showQuesPop(index)"
						/>
						<van-field name="stepper" label="数量">
							<template #input>
								<van-stepper v-model="item.num" />
							</template>
						</van-field>
						<van-field name="stepper" label="分数">
							<template #input>
								<van-stepper v-model="item.questionScore" />
							</template>
						</van-field>
						<van-field name="stepper" label="最小难度值">
							<template #input>
								<van-stepper
									min="1"
									max="10"
									v-model="item.minDifficulty"
									step="1"
								/>
							</template>
						</van-field>
						<van-field name="stepper" label="最大难度值">
							<template #input>
								<van-stepper
									min="1"
									max="10"
									v-model="item.maxDifficulty"
									step="1"
								/>
							</template>
						</van-field>
					</van-form>
					<div class="add-wrap">
						<van-button
							plain
							icon="cross"
							size="mini"
							type="danger"
							@click="deleteOne(index)"
						></van-button>
					</div>
				</div>
				<div class="add-wrap">
					<van-button plain icon="plus" size="small" type="info" @click="addQuestion"
						>增加题型</van-button
					>
				</div>
				<div style="margin: 16px">
					<van-button round block type="info" native-type="submit" @click="submit"
						>提交</van-button
					>
				</div>
			</div>
		</div>
		<van-popup v-model="showques" position="bottom">
			<van-picker
				show-toolbar
				:columns="questionType"
				@confirm="selectQuesType"
				value-key="name"
				@cancel="showques = false"
			/>
		</van-popup>
	</div>
</template>
<script>
export default {
	name: "edit-papers",
	data() {
		return {
			timer: null,
			activeIndex: 0,
			state: 1,
			questionBank: [],
			show: false,
			showques: false,
			quesIdx: 0,
			form: {
				examId: "",
				questionBankIds: [],
				questionSequences: [
					{
						maxDifficulty: 10,
						minDifficulty: 1,
						num: 1,
						questionScore: 5,
						questionType: {
							name: "",
							type: "",
						},
					},
				],
			},
			questionType: [
				{ type: "TypeA1", name: "A1题" },
				{ type: "TypeA2", name: "A2题" },
				{ type: "TypeA3", name: "A3题" },
				{ type: "TypeA4", name: "A4题" },
				{ type: "TypeB1", name: "B1题" },
				{ type: "TypeM1", name: "M1题" },
				{ type: "TypeSingleChoice", name: "单选题" },
				{ type: "TypeMultipleChoice", name: "多选题" },
				{ type: "TypeJudge", name: "判断题" },
				{ type: "TypeSort", name: "排序题" },
				{ type: "TypeEssay", name: "填空题" },
				{ type: "TypeFlow", name: "系列题" },
				{ type: "TypeWork", name: "应用题" },
				{ type: "TypeSubjective", name: "主观题" },
				{ type: "TypeExplanation", name: "名词解释题" },
			],
		};
	},
	mounted() {
		this.form.examId = this.$route.query.examId;
		this.getSubject();
	},
	methods: {
		getSubject() {
			this.$APIs
				.getSubject()
				.then((response) => {
					console.log(Object.keys(response));
					var items = [];
					Object.keys(response).forEach((element) => {
						response[element].text = response[element].subjectName;
						response[element].children = [];
						response[element].children.push(
							...this.recursion(response[element].nodes, []),
						);

						response[element].children.unshift({
							questionBankCode: response[element].questionBankCode,
							questionBankId: response[element].questionBankId,
							subjectLevel: response[element].subjectLevel,
							subjectName: response[element].subjectName,
							major: response[element].major,
							name: response[element].name,
							text: response[element].subjectName,
							id: response[element].questionBankId,
						});
						items.push(response[element]);
					});

					this.questionBank = items;
				})
				.catch((error) => {
					console.log(error);
				});
		},
		changeBank(data) {
			console.log(data);
		},
		recursion(nodes, arr) {
			if (Object.keys(nodes).length === 0) {
				return arr || [];
			} else {
				Object.keys(nodes).forEach((element) => {
					arr.push({
						questionBankCode: nodes[element].questionBankCode,
						questionBankId: nodes[element].questionBankId,
						subjectLevel: nodes[element].subjectLevel,
						subjectName: nodes[element].subjectName,
						major: nodes[element].major,
						name: nodes[element].name,
						text: nodes[element].subjectName,
						id: nodes[element].questionBankId,
					});
					var childrenArr = this.recursion(nodes[element].nodes, []);
					if (childrenArr.length) {
						arr.push(...childrenArr);
					}
				});
				return arr;
			}
		},
		showQuesPop(index) {
			this.quesIdx = index;
			this.showques = true;
		},
		selectQuesType(data) {
			this.form.questionSequences[this.quesIdx].questionType = data;
			this.showques = false;
		},
		addQuestion() {
			this.form.questionSequences.push({
				maxDifficulty: 10,
				minDifficulty: 1,
				num: 1,
				questionType: {},
				questionScore: 5,
			});
			this.backBottom();
		},
		backBottom() {
			this.timer = setInterval(function () {
				let osTop = document.getElementsByClassName("container")[1].clientHeight;
				let RouterTop = document.getElementsByClassName("Router")[0].scrollTop;
				let bottom =
					document.getElementsByClassName("Router")[0].scrollTop +
					document.body.clientHeight;
				let ispeed = Math.floor((osTop - bottom) / 6);
				document.getElementsByClassName("Router")[0].scrollTop = RouterTop + ispeed;
				if (osTop < bottom + 10) {
					clearInterval(this.timer);
				}
			}, 30);
		},
		onScroll() {
			clearInterval(this.timer);
		},
		deleteOne(index) {
			this.form.questionSequences.splice(index, 1);
		},
		next() {
			this.state++;
		},
		submit() {
			var form = JSON.parse(JSON.stringify(this.form));
			form.questionSequences.forEach((element) => {
				element.questionType = element.questionType.type;
			});
			this.$APIs
				.saveTrain(form)
				.then((response) => {
					this.$router.back();
				})
				.catch((error) => {});
		},
	},
};
</script>

<style lang="scss">
.edit-papers-container {
	height: 100%;
	padding-bottom: 74px;
	display: flex;
	flex-direction: column;
	color: #333;
	overflow-y: scroll;
	.content {
		padding: 15px;
		// background-color: #fafafa;
		flex: 1;
	}
	.van-sidebar-item,
	.van-tree-select__nav {
		background-color: #161624;
		color: #fff;
	}
	.van-sidebar-item--select,
	.van-tree-select__content {
		color: #fff;
		background-color: #221f2e;
	}

	.van-checkbox__icon--checked .van-icon {
		background-color: none;
	}
	.add-wrap {
		display: flex;
		justify-content: flex-end;
		margin-top: 16px;
		padding: 0 20px;
	}
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		color: #fff;
	}
	.van-checkbox {
		margin-bottom: 12px;
	}

	.van-checkbox__label {
		font-size: 18px;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		.num {
			color: #56baca;
		}
	}
	.ques-item {
		margin-bottom: 16px;
		background-color: #fff;
		padding-bottom: 15px;
	}
	.van-checkbox__icon--checked .van-icon {
		font-size: 16px;
		color: #56baca;
		border-color: #56baca;
		background-color: #221f2e !important;
	}
}
.van-tree-select__item--active {
	color: #56baca;
}
.van-sidebar-item--select::before {
	background-color: #56baca;
}
.btn-wrap {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #161624;
	padding: 15px;
	display: flex;

	.btn {
		flex: 1;
		background: #56baca;
		color: #fff;
		height: 44px;
		text-align: center;
		line-height: 44px;
		border-radius: 5px;
		font-size: 18px;
		&:active {
			opacity: 0.7;
		}
	}
}
</style>

